// tab切换功能
const tabs = document.querySelectorAll('.tab a');
const panels = document.querySelectorAll('.tabBox .tab-panel');
tabs.forEach((tab, idx) => {
  tab.addEventListener('click', function() {
    // 切换tab高亮
    tabs.forEach(t => t.classList.remove('active'));
    tab.classList.add('active');
    // 切换内容显示
    panels.forEach((panel, i) => {
      panel.style.display = (i === idx) ? '' : 'none';
    });
  });
});
// 默认高亮第一个tab
if(tabs.length) tabs[0].classList.add('active');

// tab多选与panel多显功能
function syncTabsPanels() {
  const tabLinks = document.querySelectorAll('.tab a');
  const tabPanels = document.querySelectorAll('.tabBox .tab-panel');
  tabLinks.forEach((a, idx) => {
    const checkbox = a.querySelector('input[type="checkbox"]');
    if (checkbox && checkbox.checked) {
      a.classList.add('active');
      tabPanels[idx].style.display = '';
    } else {
      a.classList.remove('active');
      tabPanels[idx].style.display = 'none';
    }
  });
}
window.addEventListener('DOMContentLoaded', function() {
  const tabLinks = document.querySelectorAll('.tab a');
  tabLinks.forEach((a, idx) => {
    a.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() === 'input') return;
      const checkbox = a.querySelector('input[type="checkbox"]');
      if(checkbox) {
        checkbox.checked = !checkbox.checked;
        syncTabsPanels();
      }
    });
    const checkbox = a.querySelector('input[type="checkbox"]');
    if(checkbox) {
      checkbox.addEventListener('change', function() {
        syncTabsPanels();
      });
    }
  });
  syncTabsPanels();
});
